﻿@using FemCloud.Shared
@page "/getelemforce"
@inject HttpClient Http

<h1>Elem forces</h1>

<p>Calculate element force with server.</p>

<div class="form-group">
    <label class="form-control-label" for="inputLoading">Loading value:</label>
    <input type="text" class="form-control" bind="@_loadingValue" id="inputLoading" placeholder="Enter loading value here ..."/>
</div>

<button class="btn btn-primary @(_isUpdating?"disabled":"")" onclick="@UpdateElemForces">@(_isUpdating?"Updating ...": "Update elem forces")</button>

@if (_elemForces == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <table class="table table-hover">
        <thead>
        <tr>
            <th>No.</th>
            <th>Mi</th>
            <th>Mj</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var ef in _elemForces)
        {
            <tr>
                <td>@ef.ElemNum</td>
                <td>@ef.Mi</td>
                <td>@ef.Mj</td>
            </tr>
        }
        </tbody>
    </table>
}

@functions
{
    ElemForce[] _elemForces;

    bool _isUpdating = false;

    double _loadingValue = 1e3;

    //protected override async Task OnInitAsync()
    //{
    //    //await UpdateElemForces();
    //}

    async Task UpdateElemForces()
    {
        _isUpdating = true;

        _elemForces = await Http.GetJsonAsync<ElemForce[]>($"api/elemdata/forces/{_loadingValue}");

        _isUpdating = false;
    }

}